<template>
	<view class="view-port">
		<!-- 顶部搜索框 -->
		<JiuSearch />
		<!-- <TopCategory /> -->
		
		<scroll-view enable-back-to-top refresher-enabled @refresherrefresh="onRefresherrefresh"
			:refresher-triggered="isTriggered" @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
			<!-- 骨加屏 -->
			<!-- <PageSkeleton v-if="isLoading" /> -->
			<!-- <template v-else> -->
			<!-- 轮播图 -->
			<!-- <JiuSwiper :banners="banners" /> -->
			<!-- 分类图 -->
			<!-- <CategoryPanel :categories="categoryStore.categories" /> -->
			<CategoryPanel :categories="categoryStore.categories" />
			<!-- 模块展示 -->
			<ModulePanle />
			<!-- 热销推荐 -->
			<HotPanel />
			<!-- 猜你喜欢 -->
			<JiuGuess ref="guessRef" />
			<!-- </template> -->
			
		</scroll-view>
		<!-- 回到顶部 -->
		<ReturnTop></ReturnTop>
		
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getGoodsBannerApi } from "@/api/banner/index.ts";
	import type { GoodsBannerVo } from '@/api/banner/types.ts';
	import CategoryPanel from './components/CategoryPanel.vue';
	import ModulePanle from './components/ModulePanle.vue';
	import { useCategoryStore } from '@/store/modules/category';
	// import PageSkeleton from './components/PageSkeleton.vue';
	import HotPanel from './components/HotPanel.vue';
	import { useGuessList } from '@/composables/index.ts';
	import ReturnTop from '@/components/ReturnTop.vue';
	// import { getCategoryPanelApi } from "@/api/category/index.ts";
	// import type { CategoryVo } from '@/api/category/types.ts';
	import TopCategory from '@/components/TopCategory.vue';

	const banners = ref<GoodsBannerVo[]>([]);
	const isTriggered = ref(false); //下拉刷新加载动画
	const isLoading = ref(false); // 下拉刷新是否加载中标记
	const categoryStore = useCategoryStore();
	// const categories = ref<CategoryVo[]>([]);

	/*轮播图 */
	const getBananer = async () => {
		const res = await getGoodsBannerApi();
		banners.value = res.data
	}
	
	/* 商品分类 */
	
	// const getCategory = async () => {
	// 	const res = await getCategoryPanelApi()
	// 	console.log(res)
	// 	categories.value= res.data
	// }
	/* 触底加载更多 */
	const { guessRef, onScrolltolower } = useGuessList()
	/* 下拉刷新事件 */
	const onRefresherrefresh = async () => {
		//下拉刷新动画开始
		isTriggered.value = true
		//重置猜你喜欢数据
		guessRef.value?.reset();
		//Promise.all同时发起多个请求
		await Promise.all([
			//加载需要下拉刷新的模块
			categoryStore.getCategory(),
			// getCategory(),
			getBananer(),
			guessRef.value?.getGoods()
		])
		//下拉刷新动画关闭
		isTriggered.value = false
	}

	onLoad(async () => {
		isLoading.value = true;
		//Promise.all同时发起请求
		await Promise.all([
			getBananer(),
			categoryStore.getCategory(),
			// getCategory()
		])
		isLoading.value = false;

	})
	
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		height: 100%;
		// overflow: hidden;
	}

	.view-port {
		height: 100%;
		display: flex;
		flex-direction: column;

	}

	.scroll-view {
		flex: 1;
		overflow: hidden;
	}
	
</style>